<template>
  <el-dialog v-model="visible" title="任务详情" width="50%">
    <el-descriptions :column="1" border>
      <el-descriptions-item label="ID">{{ detail?.id }}</el-descriptions-item>
      <el-descriptions-item label="任务名称">{{ detail?.name }}</el-descriptions-item>
      <el-descriptions-item label="目标URL">{{ detail?.target_url }}</el-descriptions-item>
      <el-descriptions-item label="状态">
        <el-tag :type="statusTagType(detail!.status)">
          {{ statusText(detail!.status) }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="执行次数">{{ detail?.curr_execute_count }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{ detail?.created_at }}</el-descriptions-item>
      <el-descriptions-item label="上次执行时间">
        {{ detail?.last_execute_time || "未执行" }}
      </el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { type TaskType } from "@/api/task/task";

const props = defineProps<{
  modelValue: boolean;
  detail: TaskType | null;
}>();

const emit = defineEmits(["update:modelValue"]);

const visible = computed({
  get: () => props.modelValue,
  set: (val) => emit("update:modelValue", val),
});

function statusText(status: string) {
  const map: Record<string, string> = {
    pending: "待处理",
    processing: "执行中",
    success: "成功",
    failed: "失败",
  };
  return map[status] || status;
}

function statusTagType(status: string): any {
  const map: Record<string, string> = {
    pending: "info",
    processing: "warning",
    success: "success",
    failed: "danger",
  };
  return map[status] || "";
}
</script>
